<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <script>
        function move(fromId,toId){
            let fromChild = document.getElementById(fromId);
            let toChild = document.getElementById(toId);

            for(let i = 0; i < fromChild.length; i++){
                if(fromChild.options[i].selected){
                    fromChild.options[i].style.color = "#dddddd";
                    toChild.options[i].style.color = "#000000";
                    // 取消选中效果
                    fromChild.options[i].selected = false;
                }
            }
        }

        function moveAll(fromId,toId){
            let fromChild = document.getElementById(fromId);
            let toChild = document.getElementById(toId);

            for(let i = 0; i < fromChild.length; i++){
                fromChild.options[i].style.color = "#dddddd";
                toChild.options[i].style.color = "#000000";
                // 取消选中效果
                fromChild.options[i].selected = false;
            }
        }
    </script>
</head>
<body>
<table>
    <tr>
        <td>
            <select id="s1" multiple style="width: 100px;height: 130px;">
                <option value="1" style="color:#000000;">孙尚香</option>
                <option value="2" style="color:#000000;">瑶</option>
                <option value="3" style="color:#000000;">李白</option>
                <option value="4" style="color:#000000;">貂蝉</option>
                <option value="5" style="color:#000000;">吕布</option>
            </select>
        </td>
        <td>
            <button onclick="move('s1','s2')">&nbsp;--></button><br>
            <button onclick="moveAll('s1','s2')">->></button><br>
            <button onclick="move('s2','s1')"><--&nbsp;</button><br>
            <button onclick="moveAll('s2','s1')"><<-</button><br>
        </td>
        <td>
            <select id="s2" multiple style="width: 100px;height: 130px;">
                <option value="1" style="color:#dddddd;">孙尚香</option>
                <option value="2" style="color:#dddddd;">瑶</option>
                <option value="3" style="color:#dddddd;">李白</option>
                <option value="4" style="color:#dddddd;">貂蝉</option>
                <option value="5" style="color:#dddddd;">吕布</option>
            </select>
        </td>
    </tr>
</table>
</body>
</html>